<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      没有防抖的input
      <input type="text" id="unDebounce" placeholder="请输入您要搜索的用户名" />
    </div>
    <div>
      防抖后的input
      <input type="text" id="debounce" placeholder="请输入您要搜索的用户名" />
    </div>
    <script>
      // 不加防抖的
      const inputA = document.getElementById('unDebounce');
      const inputB = document.getElementById('debounce');

      function handleNameSearch(e) {
        console.log(e.target.value);
        const value = e.target.value;
        fetch('http://localhost:3000/users')
          .then(res => res.json())
          .then(data => {
            const users = data;
            // 数组上es6的新方法，map 转换， filter 过滤
            // callback
            const newUsers = users.filter(user => {
              // 字符串中的新方法
              // 可读性更好 es6 字符串新增方法
              return user.name.includes(value);
              // return user.name.indexOf(value) !== -1;
            });
            console.log(...newUsers);
          });
      }

      // 闭包
      function debounce(func, delay) {
        // 返回值必须得是函数 keyup 事件处理函数
        // let id;
        return function (args) {
          clearTimeout(func.id);
          // 函数是对象，id挂载在func上, func 是闭包中的自由变量
          func.id = setTimeout(function () {
            func(args);
          }, delay);
        };
      }

      //
      const debounceNameSearch = debounce(handleNameSearch, 500);

      inputA.addEventListener('keyup', handleNameSearch);
      inputB.addEventListener('keyup', debounceNameSearch);
    </script>
  </body>
</html>
